<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>活動詳情 - 城市露營音樂節</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f5f5f5;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #333;
      padding-bottom: 60px;
    }
    
    /* 頂部導航 */
    .top-nav {
      background-color: rgba(0,0,0,0.5);
      padding: 15px 15px;
      color: white;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .nav-btn {
      color: white;
      font-size: 20px;
    }
    
    /* 活動圖片輪播 */
    .event-carousel {
      position: relative;
      overflow: hidden;
    }
    
    .carousel-images {
      display: flex;
      transition: transform 0.5s ease;
    }
    
    .carousel-image {
      width: 100%;
      height: 250px;
      object-fit: cover;
      flex-shrink: 0;
    }
    
    .carousel-indicators {
      position: absolute;
      bottom: 15px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      gap: 6px;
    }
    
    .carousel-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: rgba(255,255,255,0.5);
    }
    
    .carousel-dot.active {
      background-color: white;
    }
    
    /* 活動基本信息 */
    .event-header {
      background-color: white;
      padding: 15px;
    }
    
    .event-status {
      display: inline-block;
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 500;
      margin-right: 8px;
    }
    
    .status-hot {
      background-color: #ffebee;
      color: #c62828;
    }
    
    .event-title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 10px;
      line-height: 1.3;
    }
    
    .event-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      font-size: 13px;
      color: #666;
      margin-bottom: 15px;
    }
    
    .event-meta-item {
      display: flex;
      align-items: center;
    }
    
    .event-meta-item i {
      margin-right: 5px;
      color: #3498db;
    }
    
    .event-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 15px;
    }
    
    .event-tag {
      background-color: #f0f7ff;
      color: #3498db;
      font-size: 12px;
      padding: 3px 10px;
      border-radius: 4px;
    }
    
    /* 活動操作按鈕 */
    .event-actions {
      display: flex;
      gap: 10px;
      padding: 10px 15px;
      background-color: white;
      border-top: 1px solid #eee;
      position: sticky;
      top: 57px;
      z-index: 90;
    }
    
    .action-btn {
      flex: 1;
      padding: 10px 0;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    
    .primary-action {
      background-color: #3498db;
      color: white;
    }
    
    .secondary-action {
      background-color: #f5f5f5;
      color: #666;
    }
    
    /* 活動內容區域 */
    .event-content {
      background-color: white;
      margin-top: 10px;
      padding: 15px;
    }
    
    .content-section {
      margin-bottom: 25px;
    }
    
    .section-title {
      font-size: 17px;
      font-weight: 600;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid #eee;
    }
    
    .section-content {
      font-size: 15px;
      line-height: 1.6;
    }
    
    .content-image {
      width: 100%;
      border-radius: 8px;
      margin: 12px 0;
    }
    
    .detail-item {
      display: flex;
      margin-bottom: 12px;
    }
    
    .detail-label {
      width: 80px;
      color: #666;
      flex-shrink: 0;
    }
    
    .detail-value {
      flex: 1;
    }
    
    /* 參與者列表 */
    .participants-list {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
    }
    
    .participant {
      width: 70px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .participant-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      margin-bottom: 5px;
    }
    
    .participant-name {
      font-size: 13px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
    }
    
    /* 留言區域 */
    .comments-section {
      background-color: white;
      margin-top: 10px;
      padding: 15px;
    }
    
    .comment-input-container {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }
    
    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .comment-input {
      flex: 1;
      border: 1px solid #ddd;
      border-radius: 20px;
      padding: 10px 15px;
      font-size: 14px;
      outline: none;
    }
    
    .comment-list {
      margin-top: 15px;
    }
    
    .comment-item {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }
    
    .comment-content {
      flex: 1;
    }
    
    .comment-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
    }
    
    .comment-author {
      font-size: 14px;
      font-weight: 500;
    }
    
    .comment-time {
      font-size: 12px;
      color: #999;
    }
    
    .comment-text {
      font-size: 14px;
      background-color: #f5f5f5;
      padding: 10px 15px;
      border-radius: 15px;
      margin-bottom: 8px;
    }
    
    .comment-actions {
      display: flex;
      gap: 15px;
      font-size: 12px;
      color: #666;
    }
    
    .comment-action {
      display: flex;
      align-items: center;
      gap: 3px;
      cursor: pointer;
    }
    
    .comment-action.liked {
      color: #e74c3c;
    }
    
    /* 回復區域 */
    .replies {
      margin-left: 30px;
      margin-top: 10px;
    }
    
    .reply-item {
      display: flex;
      gap: 8px;
      margin-bottom: 10px;
    }
    
    .reply-content {
      flex: 1;
    }
    
    .reply-text {
      font-size: 13px;
      background-color: #f5f5f5;
      padding: 8px 12px;
      border-radius: 12px;
      margin-bottom: 5px;
    }
    
    .reply-text span {
      color: #3498db;
      font-weight: 500;
    }
    
    /* 底部導航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      border-top: 1px solid #eee;
      display: flex;
      padding: 8px 0;
      z-index: 100;
    }
    
    .nav-link {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #999;
      font-size: 10px;
      text-decoration: none;
    }
    
    .nav-link.active {
      color: #3498db;
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    /* 分享彈窗 */
    .share-modal {
      position: fixed;
      bottom: -300px;
      left: 0;
      right: 0;
      background-color: white;
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
      padding: 20px;
      z-index: 101;
      transition: bottom 0.3s ease;
    }
    
    .share-modal.active {
      bottom: 0;
    }
    
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.5);
      z-index: 100;
      display: none;
    }
    
    .modal-overlay.active {
      display: block;
    }
    
    .modal-title {
      font-size: 16px;
      font-weight: 600;
      text-align: center;
      margin-bottom: 20px;
    }
    
    .share-options {
      display: flex;
      justify-content: space-around;
    }
    
    .share-option {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 60px;
    }
    
    .share-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #f5f5f5;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      margin-bottom: 5px;
    }
    
    .share-text {
      font-size: 12px;
      text-align: center;
    }
    
    .close-modal {
      margin-top: 20px;
      width: 100%;
      padding: 10px;
      border-radius: 8px;
      border: none;
      background-color: #f5f5f5;
      font-size: 15px;
    }
  </style>
</head>
<body>
  <!-- 頂部導航 -->
  <div class="top-nav">
    <button class="nav-btn" onclick="history.back()">
      <i class="fa fa-arrow-left"></i>
    </button>
    <div class="nav-btn" id="openShareModal">
      <i class="fa fa-share-alt"></i>
    </div>
  </div>
  
  <!-- 活動圖片輪播 -->
  <div class="event-carousel" id="eventCarousel">
    <div class="carousel-images">
      <img src="https://picsum.photos/800/500?random=10" alt="活動圖片" class="carousel-image">
      <img src="https://picsum.photos/800/500?random=11" alt="活動圖片" class="carousel-image">
      <img src="https://picsum.photos/800/500?random=12" alt="活動圖片" class="carousel-image">
      <img src="https://picsum.photos/800/500?random=13" alt="活動圖片" class="carousel-image">
    </div>
    <div class="carousel-indicators">
      <div class="carousel-dot active"></div>
      <div class="carousel-dot"></div>
      <div class="carousel-dot"></div>
      <div class="carousel-dot"></div>
    </div>
  </div>
  
  <!-- 活動基本信息 -->
  <div class="event-header">
    <div>
      <span class="event-status status-hot">熱門</span>
      <h1 class="event-title">城市露營音樂節 - 夏日特別場</h1>
    </div>
    
    <div class="event-meta">
      <div class="event-meta-item">
        <i class="fa fa-calendar"></i>
        <span>6月15日 18:00-23:00</span>
      </div>
      <div class="event-meta-item">
        <i class="fa fa-map-marker"></i>
        <span>中央公園西區露營地</span>
      </div>
      <div class="event-meta-item">
        <i class="fa fa-ticket"></i>
        <span>¥128起</span>
      </div>
      <div class="event-meta-item">
        <i class="fa fa-users"></i>
        <span>128人參加</span>
      </div>
    </div>
    
    <div class="event-tags">
      <span class="event-tag">音樂</span>
      <span class="event-tag">露營</span>
      <span class="event-tag">美食</span>
      <span class="event-tag">戶外</span>
      <span class="event-tag">夏日</span>
    </div>
    
    <div class="event-host">
      <div style="display: flex; align-items: center;">
        <img src="https://picsum.photos/100/100?random=50" alt="主辦方" style="width: 30px; height: 30px; border-radius: 50%; margin-right: 8px;">
        <div>
          <div style="font-size: 14px; font-weight: 500;">城市戶外俱樂部</div>
          <div style="font-size: 12px; color: #666;">活動主辦方</div>
        </div>
        <button style="margin-left: auto; background-color: #f0f7ff; color: #3498db; border: none; border-radius: 15px; padding: 5px 12px; font-size: 13px;">
          關注
        </button>
      </div>
    </div>
  </div>
  
  <!-- 活動操作按鈕 -->
  <div class="event-actions">
    <button class="action-btn secondary-action" id="collectBtn">
      <i class="fa fa-heart-o"></i>
      <span>收藏</span>
    </button>
    <button class="action-btn secondary-action" id="shareBtn">
      <i class="fa fa-share-alt"></i>
      <span>分享</span>
    </button>
    <button class="action-btn secondary-action" id="moreBtn">
      <i class="fa fa-ellipsis-h"></i>
      <span>更多</span>
    </button>
    <button class="action-btn primary-action" id="joinBtn">
      <i class="fa fa-ticket"></i>
      <span>立即報名</span>
    </button>
  </div>
  
  <!-- 活動內容區域 -->
  <div class="event-content">
    <!-- 活動介紹 -->
    <div class="content-section">
      <h2 class="section-title">活動介紹</h2>
      <div class="section-content">
        <p>一場融合音樂、露營與美食的夏日狂歡即將登場！我們邀請了多位獨立音樂人現場演出，帶來搖滾、民謠、電子等多種音樂風格。</p>
        
        <img src="https://picsum.photos/800/400?random=20" alt="活動現場" class="content-image">
        
        <p>活動現場將設置多個美食攤位，提供來自各地的特色小吃和飲品。同時開放露營體驗區，你可以自帶帳篷或現場租用，在音樂陪伴下度過一個難忘的夏夜。</p>
        
        <p>適合人群：音樂愛好者、戶外活動愛好者、想要放鬆心情的都市年輕人。</p>
      </div>
    </div>
    
    <!-- 活動詳情 -->
    <div class="content-section">
      <h2 class="section-title">活動詳情</h2>
      <div class="section-content">
        <div class="detail-item">
          <div class="detail-label">活動時間</div>
          <div class="detail-value">2023年6月15日 18:00-23:00</div>
        </div>
        <div class="detail-item">
          <div class="detail-label">活動地點</div>
          <div class="detail-value">中央公園西區露營地（地鐵2號線中央公園站D出口步行10分鐘）</div>
        </div>
        <div class="detail-item">
          <div class="detail-label">票務信息</div>
          <div class="detail-value">
            標準票：¥128（含入場券+飲品一杯）<br>
            貴賓票：¥258（含入場券+美食套餐+優先入場）<br>
            露營套票：¥368（含入場券+露營位+早餐）
          </div>
        </div>
        <div class="detail-item">
          <div class="detail-label">活動流程</div>
          <div class="detail-value">
            18:00-19:00 入場、自由交流<br>
            19:00-20:30 第一階段演出<br>
            20:30-21:00 中場休息<br>
            21:00-22:30 第二階段演出<br>
            22:30-23:00 互動環節、抽獎
          </div>
        </div>
        <div class="detail-item">
          <div class="detail-label">注意事項</div>
          <div class="detail-value">
            1. 請自覺遵守現場秩序，服從工作人員安排<br>
            2. 戶外活動請注意防曬防蚊，建議自備外套<br>
            3. 現場提供免費停車位，數量有限<br>
            4. 禁止攜帶易燃易爆等危險物品
          </div>
        </div>
      </div>
    </div>
    
    <!-- 演出嘉賓 -->
    <div class="content-section">
      <h2 class="section-title">演出嘉賓</h2>
      <div class="section-content">
        <div class="participants-list">
          <div class="participant">
            <img src="https://picsum.photos/100/100?random=30" alt="嘉賓" class="participant-avatar">
            <div class="participant-name">星空樂隊</div>
          </div>
          <div class="participant">
            <img src="https://picsum.photos/100/100?random=31" alt="嘉賓" class="participant-avatar">
            <div class="participant-name">李小明</div>
          </div>
          <div class="participant">
            <img src="https://picsum.photos/100/100?random=32" alt="嘉賓" class="participant-avatar">
            <div class="participant-name">張雨晨</div>
          </div>
          <div class="participant">
            <img src="https://picsum.photos/100/100?random=33" alt="嘉賓" class="participant-avatar">
            <div class="participant-name">電音製作人K</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 參與者 -->
    <div class="content-section">
      <h2 class="section-title">已確認參與者</h2>
      <div class="section-content">
        <div class="participants-list">
          <div class="participant">
            <img src="https://picsum.photos/100/100?random=40" alt="參與者" class="participant-avatar">
            <div class="participant-name">王小帥</div>
          </div>
          <div class="participant">
            <img src="https://picsum.photos/100/100?random=41" alt="參與者" class="participant-avatar">
            <div class="participant-name">李小花</div>
          </div>
          <div class="participant">
            <img src="https://picsum.photos/100/100?random=42" alt="參與者" class="participant-avatar">
            <div class="participant-name">張大山</div>
          </div>
          <div class="participant">
            <img src="https://picsum.photos/100/100?random=43" alt="參與者" class="participant-avatar">
            <div class="participant-name">陳思思</div>
          </div>
          <div class="participant">
            <img src="https://picsum.photos/100/100?random=44" alt="參與者" class="participant-avatar">
            <div class="participant-name">劉洋</div>
          </div>
          <div class="participant">
            <img src="https://picsum.photos/100/100?random=45" alt="參與者" class="participant-avatar">
            <div class="participant-name">趙穎</div>
          </div>
          <div class="participant" style="justify-content: center; align-items: center; padding-top: 15px;">
            <div style="font-size: 13px; color: #666;">+122人</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 留言區域 -->
  <div class="comments-section">
    <h2 class="section-title">留言討論 (32)</h2>
    
    <div class="comment-input-container">
      <img src="https://picsum.photos/100/100?random=60" alt="用戶頭像" class="user-avatar">
      <input type="text" class="comment-input" placeholder="分享你的想法...">
    </div>
    
    <div class="comment-list">
      <!-- 留言1 -->
      <div class="comment-item">
        <img src="https://picsum.photos/100/100?random=61" alt="用戶頭像" class="user-avatar">
        <div class="comment-content">
          <div class="comment-header">
            <div class="comment-author">林音樂</div>
            <div class="comment-time">2小時前</div>
          </div>
          <div class="comment-text">請問現場可以自帶食物和飲料嗎？還是必須購買現場的？</div>
          <div class="comment-actions">
            <div class="comment-action reply-btn">
              <i class="fa fa-reply"></i>
              <span>回復</span>
            </div>
            <div class="comment-action like-btn">
              <i class="fa fa-heart-o"></i>
              <span>12</span>
            </div>
          </div>
          
          <!-- 回復 -->
          <div class="replies">
            <div class="reply-item">
              <img src="https://picsum.photos/100/100?random=50" alt="回復者頭像" class="user-avatar" style="width: 30px; height: 30px;">
              <div class="reply-content">
                <div class="comment-header">
                  <div class="comment-author">城市戶外俱樂部</div>
                  <div class="comment-time">1小時前</div>
                </div>
                <div class="reply-text">
                  <span>@林音樂</span> 可以自帶非酒精飲料和小零食，現場也有豐富的美食選擇哦！
                </div>
                <div class="comment-actions">
                  <div class="comment-action reply-btn">
                    <i class="fa fa-reply"></i>
                    <span>回復</span>
                  </div>
                  <div class="comment-action like-btn">
                    <i class="fa fa-heart-o"></i>
                    <span>3</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 留言2 -->
      <div class="comment-item">
        <img src="https://picsum.photos/100/100?random=62" alt="用戶頭像" class="user-avatar">
        <div class="comment-content">
          <div class="comment-header">
            <div class="comment-author">露營愛好者</div>
            <div class="comment-time">昨天 18:30</div>
          </div>
          <div class="comment-text">請問現場租用帳篷的話，包含睡袋和防潮墊嗎？還是需要額外付費？</div>
          <div class="comment-actions">
            <div class="comment-action reply-btn">
              <i class="fa fa-reply"></i>
              <span>回復</span>
            </div>
            <div class="comment-action like-btn">
              <i class="fa fa-heart-o"></i>
              <span>8</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 留言3 -->
      <div class="comment-item">
        <img src="https://picsum.photos/100/100?random=63" alt="用戶頭像" class="user-avatar">
        <div class="comment-content">
          <div class="comment-header">
            <div class="comment-author">音樂瘋子</div>
            <div class="comment-time">2天前</div>
          </div>
          <div class="comment-text">超級期待星空樂隊的演出！他們上次在音樂節的表現太精彩了，這次要前排支持！</div>
          <div class="comment-actions">
            <div class="comment-action reply-btn">
              <i class="fa fa-reply"></i>
              <span>回復</span>
            </div>
            <div class="comment-action like-btn liked">
              <i class="fa fa-heart"></i>
              <span>24</span>
            </div>
          </div>
          
          <!-- 回復 -->
          <div class="replies">
            <div class="reply-item">
              <img src="https://picsum.photos/100/100?random=64" alt="回復者頭像" class="user-avatar" style="width: 30px; height: 30px;">
              <div class="reply-content">
                <div class="comment-header">
                  <div class="comment-author">音樂愛好者</div>
                  <div class="comment-time">1天前</div>
                </div>
                <div class="reply-text">
                  <span>@音樂瘋子</span> 我也是沖著他們來的！到時候可以一起呀~
                </div>
                <div class="comment-actions">
                  <div class="comment-action reply-btn">
                    <i class="fa fa-reply"></i>
                    <span>回復</span>
                  </div>
                  <div class="comment-action like-btn">
                    <i class="fa fa-heart-o"></i>
                    <span>5</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 分享彈窗 -->
  <div class="share-modal" id="shareModal">
    <div class="modal-title">分享活動給好友</div>
    <div class="share-options">
      <div class="share-option">
        <div class="share-icon" style="color: #07C160;">
          <i class="fa fa-weixin"></i>
        </div>
        <div class="share-text">微信好友</div>
      </div>
      <div class="share-option">
        <div class="share-icon" style="color: #07C160;">
          <i class="fa fa-wechat"></i>
        </div>
        <div class="share-text">微信朋友圈</div>
      </div>
      <div class="share-option">
        <div class="share-icon" style="color: #1296DB;">
          <i class="fa fa-qq"></i>
        </div>
        <div class="share-text">QQ好友</div>
      </div>
      <div class="share-option">
        <div class="share-icon" style="color: #FF4D4F;">
          <i class="fa fa-weibo"></i>
        </div>
        <div class="share-text">微博</div>
      </div>
      <div class="share-option">
        <div class="share-icon" style="color: #666;">
          <i class="fa fa-link"></i>
        </div>
        <div class="share-text">複製鏈接</div>
      </div>
    </div>
    <button class="close-modal" id="closeShareModal">取消</button>
  </div>
  
  <div class="modal-overlay" id="modalOverlay"></div>
  
  <!-- 底部導航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-link">
      <i class="fa fa-home nav-icon"></i>
      <span>首頁</span>
    </a>
    <a href="#" class="nav-link active">
      <i class="fa fa-calendar nav-icon"></i>
      <span>活動</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-plus-circle nav-icon"></i>
      <span>發布</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-comments nav-icon"></i>
      <span>消息</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-user-o nav-icon"></i>
      <span>我的</span>
    </a>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 圖片輪播功能
    const carousel = document.getElementById('eventCarousel');
    const imagesContainer = carousel.querySelector('.carousel-images');
    const images = carousel.querySelectorAll('.carousel-image');
    const dots = carousel.querySelectorAll('.carousel-dot');
    let currentImage = 0;
    let imageWidth = images[0].offsetWidth;
    
    // 設置輪播圖寬度
    function setImagePosition() {
      imageWidth = images[0].offsetWidth;
      images.forEach((image, index) => {
        image.style.left = imageWidth * index + 'px';
      });
    }
    
    // 移動到指定圖片
    function moveToImage(imageIndex) {
      imagesContainer.style.transform = 'translateX(-' + (imageWidth * imageIndex) + 'px)';
      
      // 更新指示器
      dots.forEach(dot => dot.classList.remove('active'));
      dots[imageIndex].classList.add('active');
      
      currentImage = imageIndex;
    }
    
    // 初始化輪播
    setImagePosition();
    window.addEventListener('resize', setImagePosition);
    
    // 自動輪播
    let carouselInterval = setInterval(() => {
      let nextImage = (currentImage + 1) % images.length;
      moveToImage(nextImage);
    }, 5000);
    
    // 點擊指示器切換圖片
    dots.forEach((dot, index) => {
      dot.addEventListener('click', () => {
        clearInterval(carouselInterval);
        moveToImage(index);
        // 重新啟動自動輪播
        carouselInterval = setInterval(() => {
          let nextImage = (currentImage + 1) % images.length;
          moveToImage(nextImage);
        }, 5000);
      });
    });
    
    // 收藏按鈕功能
    const collectBtn = document.getElementById('collectBtn');
    collectBtn.addEventListener('click', function() {
      const icon = this.querySelector('i');
      const text = this.querySelector('span');
      
      if (icon.classList.contains('fa-heart-o')) {
        icon.classList.remove('fa-heart-o');
        icon.classList.add('fa-heart');
        text.textContent = '已收藏';
        this.style.color = '#e74c3c';
        alert('收藏成功');
      } else {
        icon.classList.remove('fa-heart');
        icon.classList.add('fa-heart-o');
        text.textContent = '收藏';
        this.style.color = '#666';
        alert('已取消收藏');
      }
    });
    
    // 分享功能
    const shareBtn = document.getElementById('shareBtn');
    const openShareModal = document.getElementById('openShareModal');
    const shareModal = document.getElementById('shareModal');
    const modalOverlay = document.getElementById('modalOverlay');
    const closeShareModal = document.getElementById('closeShareModal');
    
    function showShareModal() {
      shareModal.classList.add('active');
      modalOverlay.classList.add('active');
    }
    
    function hideShareModal() {
      shareModal.classList.remove('active');
      modalOverlay.classList.remove('active');
    }
    
    shareBtn.addEventListener('click', showShareModal);
    openShareModal.addEventListener('click', showShareModal);
    closeShareModal.addEventListener('click', hideShareModal);
    modalOverlay.addEventListener('click', hideShareModal);
    
    // 分享選項點擊
    document.querySelectorAll('.share-option').forEach(option => {
      option.addEventListener('click', function() {
        const shareType = this.querySelector('.share-text').textContent;
        alert(`已選擇${shareType}分享`);
        hideShareModal();
      });
    });
    
    // 報名按鈕功能
    const joinBtn = document.getElementById('joinBtn');
    joinBtn.addEventListener('click', function() {
      if (this.textContent.includes('立即報名')) {
        this.innerHTML = '<i class="fa fa-check"></i><span>已報名</span>';
        this.style.backgroundColor = '#2ecc71';
        alert('報名成功！票券已發送至您的賬戶');
      } else {
        this.innerHTML = '<i class="fa fa-ticket"></i><span>立即報名</span>';
        this.style.backgroundColor = '#3498db';
        alert('已取消報名');
      }
    });
    
    // 更多按鈕功能
    const moreBtn = document.getElementById('moreBtn');
    moreBtn.addEventListener('click', function() {
      alert('更多操作：舉報活動、檢舉垃圾信息、活動舉辦者信息');
    });
    
    // 留言點贊功能
    document.querySelectorAll('.like-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const icon = this.querySelector('i');
        const countEl = this.querySelector('span');
        let count = parseInt(countEl.textContent);
        
        if (icon.classList.contains('fa-heart-o')) {
          icon.classList.remove('fa-heart-o');
          icon.classList.add('fa-heart');
          this.classList.add('liked');
          countEl.textContent = count + 1;
        } else {
          icon.classList.remove('fa-heart');
          icon.classList.add('fa-heart-o');
          this.classList.remove('liked');
          countEl.textContent = count - 1;
        }
      });
    });
    
    // 回復按鈕功能
    document.querySelectorAll('.reply-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const author = this.closest('.comment-content, .reply-content').querySelector('.comment-author').textContent;
        document.querySelector('.comment-input').value = `@${author} `;
        document.querySelector('.comment-input').focus();
      });
    });
    
    // 留言輸入框發送功能
    const commentInput = document.querySelector('.comment-input');
    commentInput.addEventListener('keydown', function(e) {
      if (e.key === 'Enter' && this.value.trim() !== '') {
        alert('留言發送成功！');
        this.value = '';
      }
    });
  </script>
</body>
</html>
